<html>
    <head>
        <meta charset="UTF-8">
        <title>hide and show</title>
        <style type="text/css">
                #father{
                    width:200px;
                    height: 200px;
                    background: greenyellow;
                    font-size: 30px;
                    color: red;
                    margin-bottom: 10px;
                }
                #son{
                    width:80px;
                    height:80px;
                    background: yellow;
                    font-size: 20px;
                    color: red;
                    margin-bottom: 10px;
                }
                .two{
                    width:200px;
                    height:200px;
                    background: pink;
                    font-size: 20px;
                    color: red;
                }


                }
            
        </style>
        <script type="text/javascript" src="JQuery-js文件/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            function fun1(){
                $("#father").append($("#son"));
            }
            function fun2(){
                $("#son").appendTo($("#father"));
            }
        
        </script>
    </head>
    <body>

        <div id="father">
            我是一爸爸
        </div>
        <div class="two">
        <div id="son">
                我是儿子
            </div>
        </div>
        <input type="button" value="爸爸给自己找儿子" onclick="fun1();"/>
        <input type="button" value="儿子给自己找了给爹" onclick="fun2();"/>
    </body>
</html>